﻿.node-detail-component {
    display: flex;
    position: relative;
    align-items: stretch;
    border: 1px solid var(--wf-node-border-color);
    border-radius: var(--wf-node-border-radius);
    width: calc(var(--wf-node-width) * var(--wf-node-scale));
    min-height: var(--wf-node-min-height);
}

    .node-detail-component .card {
        border: none;
        border-radius: var(--wf-node-border-radius);
    }

        .node-detail-component .card .card-header {
            display: flex;
        }

            .node-detail-component .card .card-header .node-icon {
                display: flex;
                flex-basis: 16px;
                min-width: 16px;
                align-items: center;
                justify-content: center;
                cursor: pointer;
            }

            .node-detail-component .card .card-header .node-caption {
                flex-grow: 1;
                padding: 0 8px;
            }

                .node-detail-component .card .card-header .node-caption ::deep input {
                    padding: 0;
                }

            .node-detail-component .card .card-header .node-tools {
                display: flex;
                align-items: center;
            }

                .node-detail-component .card .card-header .node-tools ::deep .action {
                    padding-left: 6px;
                    background-color: unset;
                }

        .node-detail-component .card .card-body ::deep .node-comment-editor {
            margin-bottom: 16px;
        }

        .node-detail-component .card .card-body .node-comment {
            position: relative;
        }

            .node-detail-component .card .card-body .node-comment .alert {
                padding: 4px;
            }

            .node-detail-component .card .card-body .node-comment ::deep .action.delete-comment-action {
                position: absolute;
                background-color: unset;
                right: 2px;
                top: 2px;
            }
